﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Ecommerce</title>
    <link rel="shortcut icon" type="image/png" href="favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900%7CRoboto+Condensed:300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/plugins/owl-carousel/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/plugins/Magnific-Popup/magnific-popup.css">
    <link rel="stylesheet" href="assets/plugins/animate-css/animate.min.css">
    <link rel="stylesheet" href="assets/plugins/swiper/swiper.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <link rel="stylesheet" href="assets/css/custom.css">

    <script type="text/javascript">




        function jump(page)
        {
            document.getElementById("curPage").value=page;

            document.getElementById("frm").submit();
        }
    </script>

</head>
<body>
<!-- 引入头部的部分 -->
<div th:include="/front/header"></div>

<!-- page title -->
<section class="page-title-inner" data-bg-img='assets/img/page-titlebg.png'>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <!-- page title inner -->
                <div class="page-title-wrap">
                    <div class="page-title-heading"><h1 class="h2">商店页面<span>Shopping</span></h1></div>
                    <ul class="list-unstyled mb-0">
                        <li><a href="index.html">家</a></li>
                        <li class="active"><a href="#">店</a></li>
                    </ul>
                </div>
                <!-- End of page title inner -->
            </div>
        </div>
    </div>
</section>
<!-- End of page title -->

<!-- product shop wrapper -->
<section class="pt-100 pb-100">
    <!-- filter menu -->
    <div class="container">
        <div class="row position-relative">
            <div class="col-12">
                <div class="shop-toolbar-wrap type2">
                    <div class="shop-toolbar-filter">
                        <div class="row align-items-center">
                            <div class="col-md-4 position-static">
                                <div class="search-form position-relative">
                                    <form action="/front/shop-5col" method="post" id="frm">
                                        <input type="text" placeholder="goodsname" name="goodsName" th:value="${param.goodsName}"  class="theme-input-style" required>
                                        <input type="hidden" name="curPage" id="curPage"/>
                                        <button type="submit"><img src="assets/img/icons/search-button3.svg" class="svg" alt=""></button>
                                    </form>
                                </div>
                            </div>
                            <div class="col-md-8 col-lg-7 col-xl-6 offset-xl-2 offset-lg-1 position-static">
                                <!-- product filter inner -->
                                <div class="product-filter-inner">
                                    <!-- product found -->
                                    <div class="product-found product-count">
                                        <span>显示40个结果中的1-12个</span>
                                    </div>
                                    <!-- End of product found -->

                                    <!-- product filter -->
                                    <div class="product-filter catalog-filter">
                                        <div class="product-filter-mobile">
                                            <a href="#" class="d-lg-none d-block"><i class="fa fa-sliders"></i></a>
                                        </div>
                                        <a href="#" class="d-none d-lg-block product-filter-btn"><i class="fa fa-filter"></i><span>过滤</span><i class="fa fa-angle-down"></i></a>

                                        <!-- product filter menu -->
                                        <div class="product-filter-menu">
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <div class="woocommerce-products-header">
                                                        <div class="shope-filter-item">
                                                            <ul>
                                                                <li>
                                                                    <a href="#" >分类依据</a>
                                                                    <ul class="category-list" >

                                                                        <li th:each="categoryList:${categoryList}">
                                                                            <a href="/front/shop-5col? categoryId=categoryList.categoryId"
                                                                               th:href="@{/front/shop-5col?categoryId=}+${categoryList.categoryId}" class="active"
                                                                               th:text="${categoryList.categoryName}"></a></li>

                                                                    </ul>
                                                                </li>

                                                                <li>
                                                                    <a href="#">按价格</a>
                                                                    <ul class="price-list">
                                                                        <li th:each="g:${pd.dataList}" th:object="${g}">
                                                                            <a href="/front/shop-5col? goodsId=g.goodsId"
                                                                               th:href="@{/front/shop-5col?goodsId=}+${g.goodsId}"
                                                                               class="active"
                                                                               th:text="${g.retailPrice}"></a></li>

                                                                        <!--<li><a href="/front/shop-5col?">$51.00 - $100.00</a></li>-->
                                                                        <!--<li><a href="#">$101.00 - $300.00</a></li>-->

                                                                    </ul>
                                                                </li>

                                                                <li>
                                                                    <a href="#" >按尺寸</a>
                                                                    <ul class="category-list" >

                                                                        <li th:each="specificationList:${specificationList}">
                                                                            <a href="/front/shop-5col? goodsSizeId=specificationList.categoryId"
                                                                               th:href="@{/front/shop-5col?goodsSizeId=}+${specificationList.goodsSizeId}" class="active"
                                                                               th:text="${specificationList.goodsSizeName}"></a></li>

                                                                    </ul>
                                                                </li>

                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- End of product filter menu -->
                                    </div>
                                    <!--End of product filter -->

                                    <!-- sort by newest -->
                                    <div class="newest-product">
                                        <a href="#" id="dropdownnewest" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-sort-amount-desc"></i><span>按照 <span class="sort-by">最新排序</span></span><i class="fa fa-angle-down"></i></a>
                                        <ul class="newest-product-option dropdown-menu-right dropdown-menu" aria-labelledby="dropdownnewest">
                                            <li><a href="#">默认</a></li>
                                            <li><a href="#">人气度</a></li>
                                            <li><a href="#">评分</a></li>
                                            <li><a href="#">最新</a></li>
                                            <li><a href="#">价格:从高到低</a></li>
                                            <li><a href="#">价格:从高到低</a></li>
                                        </ul>
                                    </div>
                                    <!-- End of sort by newest -->
                                </div>
                                <!-- product filter inner -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- End of filter menu -->

    <!-- shop content wrap -->
    <div class="shop-content-wrap">
        <div class="shop-content-inner">
            <div class="single-product-inner width20" th:each="categoryList:${pd.dataList}" th:object="${categoryList}">
                <!-- single product -->

                <div class="single-product" >
                    <div class="product-item" th:each="img:*{goodsPhoto}">
                        <div class="product-thumb">
                            <!-- Product Image -->
                            <div class="product-image">
                                <a th:href="@{/front/shop-details-variable(goodsId=${categoryList.goodsId})}">
                                    <img th:src="*{goodsPhoto}" alt="">
                                </a>
                            </div>
                            <!-- End of Product Image -->


                            <!-- product title -->
                            <div class="product-title">
                                <h4><a th:href="@{/front/shop-details-variable(goodsId=${categoryList.goodsId})}" th:text="*{goodsName}"></a></h4>

                            </div>
                            <!-- end of product title -->
                        </div>

                        <!-- product info -->
                        <div class="product-info">
                            <div class="product-price" >
                                <span th:text="*{retailPrice}"></span>
                            </div>
                            <div class="product-rating">
                                <div class="star-rating">
                                    <span></span>
                                </div>
                            </div>
                        </div>
                        <!-- End of product info -->
                    </div>
                </div>
                <!-- End of single product -->
            </div>






            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <!-- blog pagination -->
                        <div class="blog-pagination-wrap">
                            <ul class="pagination blog-pagination list-unstyled">
                                <li class="disabled"><a href="#"><i class="fa fa-angle-left"></i></a></li>
                                <li><a href="javascript:jump(1)">首页</a> </li>
                                <li>
                                    <th:block th:if="${pd.curPage==1}">
                                        <span>上一页</span>
                                    </th:block>
                                    <th:block th:if="${pd.curPage>1}">
                                        <a th:href="@{'javascript:jump('+${pd.curPage-1}+')'}">上一页</a>
                                    </th:block>

                                    <th:block th:if="${pd.curPage==pd.totalPage}">
                                        <span>下一页</span>
                                    </th:block>
                                    &nbsp; &nbsp;
                                    <th:block th:if="${pd.curPage<pd.totalPage}">

                                        <a th:href="@{|javascript:jump(${pd.curPage+1})|}">下一页</a>
                                    </th:block>
                                    &nbsp; &nbsp;
                                    <a th:href="@{|javascript:jump(${pd.totalPage})|}">尾页</a>
                                    &nbsp; &nbsp;

                                    共<span th:text="${pd.totalCount}"></span>条||
                                    第<span th:text="${pd.curPage}"></span>页/
                                    共<span th:text="${pd.totalPage}"></span>页

                                    <i class="fa fa-angle-right"></i>
                                </li>


                            </ul>


                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End of shop content wrap -->
</section>


<!-- End of product shop wrapper -->




<!-- footer area -->
<!-- 引入页面尾部的部分 -->
<div th:include="/front/footer"></div>
<!-- End of footer area -->

<!-- back to top -->
<div class="back-to-top">
    <a href="#">
        <div class="back-toop-tooltip"><span>返回顶部</span></div>
        <div class="top-array"></div>
        <div class="top-line"></div>
    </a>
</div>
<!-- back to top -->

<!-- End of main wrapper -->

<!-- Modal quick view-->
<div class="modal-quickview-container">
    <div class="quick-view-content-wrap">
        <div class="modal-window-overlay"></div>
        <div class="quick-view-content">
            <div class="modal-window-close">
                <img src="assets/img/icons/close-button.svg" class="svg" alt="">
            </div>
            <div class="quick-view-content-inner">
                <div class="row align-items-center">
                    <div class="col-lg-7">
                        <!-- Start shop product slider -->
                        <div class="shop-product-slider-wrap">
                            <!-- Start shop slider top side -->
                            <div class="swiper-container quick-product-gallery">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <img class='' src="assets/img/shop/quick-view1.png" alt="" data-rjs="2" />
                                    </div>
                                    <div class="swiper-slide">
                                        <img class='' src="assets/img/shop/quick-view2.png"  alt="" data-rjs="2" />
                                    </div>
                                    <div class="swiper-slide">
                                        <img class='' src="assets/img/shop/quick-view3.png" alt="" data-rjs="2" />
                                    </div>
                                    <div class="swiper-slide">
                                        <img class='' src="assets/img/shop/quick-view4.png" alt="" data-rjs="2" />
                                    </div>
                                </div>
                            </div>
                            <!-- End of shop slider top side -->

                            <!-- Start shop slider bottom side -->
                            <div class="swiper-container quick-product-thumbs">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <img src="assets/img/shop/details-nav1.png" data-rjs="2" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="assets/img/shop/details-nav3.png" data-rjs="2" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="assets/img/shop/details-nav4.png" data-rjs="2" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="assets/img/shop/details-nav5.png" data-rjs="2" alt="">
                                    </div>
                                </div>
                            </div>
                            <!-- End of shop slider bottom side -->
                        </div>
                        <!-- End of shop product slider -->
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<!--End of Modal quick view-->

<!-- JS Files -->
<!-- ==== JQuery 3.3.1 js file==== -->
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/plugins/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/plugins/parsley/parsley.min.js"></script>
<script src="assets/plugins/retinajs/retina.min.js"></script>
<script src="assets/plugins/parallax/parallax.js"></script>
<script src="assets/plugins/parallax/parallaxh.min.js"></script>
<script src="assets/plugins/owl-carousel/owl.carousel.min.js"></script>
<script src="assets/plugins/Magnific-Popup/jquery.magnific-popup.min.js"></script>
<script src="assets/plugins/waypoints/jquery.counterup.min.js"></script>
<script src="assets/plugins/isotope/packery.pkgd.min.js"></script>
<script src="assets/plugins/swiper/swiper.min.js"></script>
<script src="assets/plugins/countdown/jquery.countdown.min.js"></script>
<script src="assets/plugins/Magnific-Popup/jquery.elevateZoom-3.0.8.min.js"></script>
<script src="assets/plugins/tweenmax/TweenMax.min.js"></script>
<script src="assets/plugins/text-animation/anime.min.js"></script>
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyB2D8wrWMY3XZnuHO6C31uq90JiuaFzGws"></script>
<script src="assets/js/scripts.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>